<template>
  <el-collapse class="collapse">
    <el-collapse-item v-for="(item,index) in formData" :key="item">
      <template #title>
        行程序号 <p>{{index+1}}</p>
      </template>
      <el-form label-position="left" :model="item" label-width="120px" size="mini">
        <ConfFormItem :options="formOpt" :data="item"></ConfFormItem>
        <div class="custom-btns">
          <el-button size="mini" type="primary" @click="handelCopy(index)">复制行</el-button>
          <el-button size="mini" type="primary" @click="handelDel(index)">删除</el-button>
          <el-button size="mini" type="primary" @click="handelRelation(index)">关联</el-button>
          <el-button size="mini" type="primary" @click="handelEdit(index)">编辑</el-button>
        </div>
      </el-form>
    </el-collapse-item>
  </el-collapse>
  <el-button size="mini" type="primary" @click="handelAdd" class="btn-add">增行</el-button>


  <p>FPS{{fps}}</p>

  <el-dialog title="关联" v-model="dialogRelationVisible" fullscreen>
    <el-collapse class="dialog-collapse">
      <el-collapse-item v-for="(item,index) in relationFormData" :key="item">
        <template #title>
          发票序号 <p>{{index+1}}</p>
          <el-switch size='mini' v-model="item.isChoice" active-color="#13ce66" inactive-color="#dcdfe6" style="margin-left:20px"></el-switch>
        </template>
        <el-form label-position="left" :model="item" label-width="120px" size="mini">
          <ConfFormItem :options="relationOpt" :data="item"></ConfFormItem>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <div class="custom-btns">
      <el-button size="mini" type="primary" @click="handelRelationDel">删除</el-button>
      <el-button size="mini" type="primary" @click="handelRelationVerify">查验</el-button>
    </div>
  </el-dialog>

  <el-dialog title="编辑" v-model="dialogEditVisible" fullscreen>
    <el-collapse class="dialog-collapse">
      <el-collapse-item v-for="(item,index) in relationFormData" :key="item">
        <template #title>
          发票明细 <p>{{index+1}}</p>
        </template>
        <el-form label-position="left" :model="item" label-width="120px" size="mini">
          <ConfFormItem :options="editOpt" :data="item"></ConfFormItem>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <div class="custom-btns">
      <el-button size="mini" type="primary" @click="handelRelationDel">删除</el-button>
      <el-button size="mini" type="primary" @click="handelRelationVerify">查验</el-button>
    </div>
  </el-dialog>
</template>

<script>
// @ is an alias to /src
import testOptions,{relationOptions,typeDict,editOption} from "./relationOptions";
import { reactive, toRefs, watch } from "vue";
import slotItem from "./slotItem.jsx";
import ConfFormItem from "../../components/ConfFormItem/index.jsx";
import {useFps } from '@vueuse/core'

const excludeItems = ["text", "selection", "index", "operation"];

export default {
  name: "Home",
  components: {
    ConfFormItem,
  },
  setup() {
    const state = reactive({
      formData: [{
        code: 100,
        test: 777,
        select1: "选项2",
        time: "",
        img:''
      },{
        code: 100,
        test: 777,
        select1: "选项2",
        time: "",
        img:''
      }],
      formOpt: testOptions,
      dialogRelationVisible:false,
      dialogEditVisible:false,
      relationOpt:relationOptions,
      relationFormData:[{
        code:10
      },{
        code:20
      }],
      editOpt:editOption
    });
    const formatOptions = (option) => {
      option.forEach((item) => {
        if (!excludeItems.includes(item.type)) {
          item.slot = (opt, data) => {
            return slotItem[opt.type](opt, data);
          };
        }
      });
    };
    formatOptions(state.formOpt);
    formatOptions(state.relationOpt);
    formatOptions(state.editOpt);
    //删除多选框 序号配置
    watch(
      () => state.formData,
      (value) => {
        console.log("state.formData", value);
      },
      { deep: true, immediate: true }
    );
    const handelCopy = (index) => {
      state.formData.push(JSON.parse(JSON.stringify(state.formData[index])))
    }
    const handelDel = (index) => {
      state.formData.splice(index,1)
    }
    const handelAdd = () => {
      const copyTemp = {}
      state.formOpt.forEach((item) => {
        if (item.type !== 'selection' && item.type !== 'index' && item.type !== 'operation') {
          Object.assign(copyTemp, { [item.prop]: typeDict[item.type] || '' })
        }
      })
      state.formData.push({ ...copyTemp })
    }
    const handelEdit = (index) => {
      state.dialogEditVisible = true
    }
    // 打开识票关联dialog
    const handelRelation = () => {
      state.dialogRelationVisible = true
    }

    const handelRelationDel = () => {
      for (let index = state.relationFormData.length - 1; index >= 0; index--) {
        if(state.relationFormData[index].isChoice){
          state.relationFormData.splice(index,1)
        }
      }
    }
    // 查验
    const handelRelationVerify = () => {
      state.relationFormData.forEach((item) => {
        if(item.isChoice){
          //
        }
      })
    }

    const fps = useFps()

    return {
      ...toRefs(state),
      handelCopy,
      handelDel,
      handelAdd,
      handelRelation,
      handelEdit,
      handelRelationVerify,
      handelRelationDel,
      fps
    };
  },
};
</script>
<style scoped>
.collapse .el-collapse-item{
  padding: 10px 10px 0 10px;
}
.collapse ::v-deep(.el-input__inner){
  width: 220px;
}
.dialog-collapse ::v-deep(.el-input__inner){
  width: 180px;
}
.custom-btns{
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
.btn-add{
  margin-top: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
